<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>有奖竞答详情 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f7;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1d1d1f;
      padding-bottom: 80px; /* 为底部输入框留出空间 */
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      color: #1d1d1f;
      font-size: 20px;
    }
    
    /* 竞答卡片容器 */
    .quiz-detail-container {
      background-color: white;
      margin-bottom: 12px;
    }
    
    /* 竞答头部 */
    .quiz-header {
      padding: 15px 15px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .quiz-creator {
      display: flex;
      align-items: center;
    }
    
    .creator-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .creator-info {
      display: flex;
      flex-direction: column;
    }
    
    .creator-name {
      font-weight: 600;
      font-size: 15px;
    }
    
    .quiz-time {
      font-size: 12px;
      color: #8e8e93;
    }
    
    .follow-btn {
      font-size: 13px;
      padding: 4px 10px;
      border-radius: 12px;
      background-color: #007aff;
      color: white;
      border: none;
    }
    
    /* 竞答内容 */
    .quiz-content {
      padding: 0 15px 10px;
    }
    
    .quiz-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 12px;
      line-height: 1.5;
    }
    
    .quiz-description {
      font-size: 15px;
      color: #666;
      line-height: 1.6;
      margin-bottom: 15px;
    }
    
    /* 图片容器 */
    .quiz-media {
      width: 100%;
      margin: 0 0 15px;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .quiz-media.single-image img {
      width: 100%;
      height: auto;
      display: block;
    }
    
    .quiz-media.multi-image {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 2px;
    }
    
    .quiz-media.multi-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      aspect-ratio: 1/1;
    }
    
    /* 奖励信息 */
    .reward-info {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      background-color: #fff8e6;
      border-left: 3px solid #ffcc00;
      margin: 0 15px 15px;
      border-radius: 0 4px 4px 0;
    }
    
    .reward-icon {
      color: #ff9500;
      font-size: 20px;
      margin-right: 10px;
    }
    
    .reward-text {
      font-size: 15px;
      font-weight: 600;
      color: #e67e22;
    }
    
    /* 竞答选项 */
    .quiz-options {
      padding: 0 15px 15px;
    }
    
    .option-item {
      padding: 15px;
      border: 1px solid #eee;
      border-radius: 8px;
      margin-bottom: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .option-item:hover {
      border-color: #007aff;
      background-color: #f0f7ff;
    }
    
    .option-item.selected {
      border-color: #007aff;
      background-color: #e8f0fe;
    }
    
    .option-item.correct {
      border-color: #34c759;
      background-color: #f0fff4;
    }
    
    .option-item.incorrect {
      border-color: #ff3b30;
      background-color: #fff5f5;
    }
    
    .option-letter {
      display: inline-block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background-color: #eee;
      color: #666;
      text-align: center;
      line-height: 24px;
      margin-right: 10px;
      font-weight: 600;
    }
    
    .option-item.selected .option-letter,
    .option-item:hover .option-letter {
      background-color: #007aff;
      color: white;
    }
    
    .option-item.correct .option-letter {
      background-color: #34c759;
      color: white;
    }
    
    .option-item.incorrect .option-letter {
      background-color: #ff3b30;
      color: white;
    }
    
    /* 答案解析 */
    .answer解析 {
      padding: 15px;
      background-color: #f9f9f9;
      border-radius: 8px;
      margin: 0 15px 15px;
      display: none;
    }
    
    .answer解析.show {
      display: block;
    }
    
    .解析-title {
      font-weight: 600;
      margin-bottom: 8px;
      color: #007aff;
      font-size: 15px;
    }
    
    .解析-content {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
    }
    
    /* 竞答状态 */
    .quiz-status {
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #8e8e93;
      border-top: 1px solid #eee;
      margin: 0 15px;
    }
    
    .status-item {
      display: flex;
      align-items: center;
    }
    
    .status-item i {
      margin-right: 5px;
      font-size: 16px;
    }
    
    .status-highlight {
      color: #007aff;
      font-weight: 600;
    }
    
    /* 底部操作栏 */
    .quiz-actions {
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      border-top: 1px solid #eee;
    }
    
    .action-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      padding: 8px 16px;
      border-radius: 20px;
      font-weight: 500;
    }
    
    .action-btn.primary {
      background-color: #007aff;
      color: white;
      border: none;
      flex: 1;
      margin-right: 10px;
    }
    
    .action-btn.secondary {
      background-color: #f0f0f0;
      color: #666;
      border: none;
      width: 48px;
      height: 48px;
      padding: 0;
      border-radius: 50%;
    }
    
    .action-btn i {
      margin-right: 6px;
    }
    
    .action-btn.secondary i {
      margin-right: 0;
    }
    
    /* 留言区 */
    .comments-section {
      background-color: white;
      padding: 15px;
      margin-bottom: 12px;
    }
    
    .comments-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .comments-count {
      color: #8e8e93;
      font-weight: normal;
      font-size: 14px;
    }
    
    /* 留言输入框 */
    .comment-input-container {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
    }
    
    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .comment-input-wrapper {
      flex: 1;
      position: relative;
    }
    
    .comment-input {
      width: 100%;
      padding: 10px 15px;
      border-radius: 20px;
      border: 1px solid #eee;
      background-color: #f5f5f7;
      font-size: 14px;
      outline: none;
      resize: none;
      min-height: 40px;
    }
    
    .send-comment {
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: #007aff;
      border: none;
      background: transparent;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }
    
    /* 留言列表 */
    .comments-list {
      margin-bottom: 10px;
    }
    
    .comment-item {
      display: flex;
      margin-bottom: 15px;
    }
    
    .comment-content {
      flex: 1;
    }
    
    .comment-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    
    .comment-author {
      font-weight: 600;
      font-size: 14px;
    }
    
    .comment-time {
      font-size: 12px;
      color: #8e8e93;
    }
    
    .comment-text {
      font-size: 14px;
      line-height: 1.5;
      background-color: #f5f5f7;
      padding: 8px 12px;
      border-radius: 18px;
      margin-bottom: 5px;
    }
    
    .comment-actions {
      display: flex;
      gap: 15px;
      font-size: 12px;
    }
    
    .comment-action {
      color: #8e8e93;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    
    .comment-action i {
      margin-right: 3px;
      font-size: 12px;
    }
    
    .comment-action.liked {
      color: #ff3b30;
    }
    
    /* 回复列表 */
    .replies-list {
      margin-left: 46px;
      margin-top: 10px;
    }
    
    .reply-item {
      display: flex;
      margin-bottom: 10px;
    }
    
    .reply-content {
      flex: 1;
    }
    
    .reply-text {
      font-size: 13px;
      line-height: 1.5;
      background-color: #f5f5f7;
      padding: 6px 10px;
      border-radius: 14px;
      margin-bottom: 5px;
    }
    
    .reply-author {
      font-weight: 600;
    }
    
    .reply-to {
      color: #007aff;
    }
    
    /* 加载更多留言 */
    .load-more-comments {
      text-align: center;
      padding: 5px 0;
    }
    
    .load-more-btn {
      background: transparent;
      border: none;
      color: #007aff;
      font-size: 14px;
    }
    
    /* 底部固定操作栏 */
    .bottom-action-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      padding: 8px 15px;
      border-top: 1px solid #eee;
      display: flex;
      align-items: center;
      z-index: 90;
    }
    
    .bottom-action {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #8e8e93;
      font-size: 12px;
      text-decoration: none;
    }
    
    .bottom-action i {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    .bottom-action.active {
      color: #007aff;
    }
    
    /* 无图样式特殊处理 */
    .quiz-detail-container.no-image .quiz-content {
      padding-bottom: 15px;
    }
    
    /* 弹窗样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .modal-overlay.show {
      opacity: 1;
      visibility: visible;
    }
    
    .modal-content {
      background-color: white;
      border-radius: 12px;
      width: 90%;
      max-width: 300px;
      padding: 20px;
      text-align: center;
      transform: translateY(20px);
      transition: transform 0.3s ease;
    }
    
    .modal-overlay.show .modal-content {
      transform: translateY(0);
    }
    
    .modal-icon {
      font-size: 40px;
      margin-bottom: 15px;
    }
    
    .modal-icon.success {
      color: #34c759;
    }
    
    .modal-icon.error {
      color: #ff3b30;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    
    .modal-message {
      font-size: 15px;
      color: #666;
      margin-bottom: 20px;
    }
    
    .modal-btn {
      background-color: #007aff;
      color: white;
      border: none;
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 500;
      width: 100%;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav">
    <button class="btn btn-link p-0 nav-btn" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">竞答详情</h1>
    <button class="btn btn-link p-0 nav-btn">
      <i class="fa fa-share-alt"></i>
    </button>
  </div>
  
  <!-- 竞答详情卡片 -->
  <div class="quiz-detail-container">
    <div class="quiz-header">
      <div class="quiz-creator">
        <img src="https://picsum.photos/100/100?random=1" alt="发起者头像" class="creator-avatar">
        <div class="creator-info">
          <div class="creator-name">知识竞赛官方</div>
          <div class="quiz-time">发布于 2023-06-15 10:00</div>
        </div>
      </div>
      <button class="follow-btn">关注</button>
    </div>
    
    <div class="quiz-content">
      <div class="quiz-title">猜一猜这三张图片分别是哪个国家的标志性建筑？</div>
      <div class="quiz-description">
        仔细观察图片中的建筑特征，回答出每个建筑所属的国家，全部答对即可参与抽奖，有机会获得精美旅行套装！
        本题截止时间：2023-06-16 22:00
      </div>
      
      <div class="quiz-media multi-image">
        <img src="https://picsum.photos/300/300?random=10" alt="竞答图片1">
        <img src="https://picsum.photos/300/300?random=11" alt="竞答图片2">
        <img src="https://picsum.photos/300/300?random=12" alt="竞答图片3">
      </div>
      
      <div class="reward-info">
        <i class="fa fa-gift reward-icon"></i>
        <div class="reward-text">奖励：旅行套装 × 10份</div>
      </div>
      
      <div class="quiz-options">
        <div class="option-item" data-option="A">
          <span class="option-letter">A</span>
          <span class="option-text">法国、美国、英国</span>
        </div>
        <div class="option-item" data-option="B">
          <span class="option-letter">B</span>
          <span class="option-text">法国、英国、美国</span>
        </div>
        <div class="option-item" data-option="C">
          <span class="option-letter">C</span>
          <span class="option-text">英国、法国、美国</span>
        </div>
        <div class="option-item" data-option="D">
          <span class="option-letter">D</span>
          <span class="option-text">美国、法国、英国</span>
        </div>
      </div>
      
      <div class="answer解析" id="answer解析">
        <div class="解析-title">答案解析</div>
        <div class="解析-content">
          正确答案是A选项。<br>
          第一张图片是法国的埃菲尔铁塔，<br>
          第二张图片是美国的自由女神像，<br>
          第三张图片是英国的大本钟。<br>
          这些都是各国著名的标志性建筑，是世界文化遗产的重要组成部分。
        </div>
      </div>
      
      <div class="quiz-status">
        <div class="status-item">
          <i class="fa fa-user"></i>
          <span>参与人数：<span class="status-highlight">1,258</span></span>
        </div>
        <div class="status-item">
          <i class="fa fa-clock-o"></i>
          <span>剩余：<span class="status-highlight">12小时</span></span>
        </div>
      </div>
      
      <div class="quiz-actions">
        <button class="action-btn primary" id="submitAnswer">
          <i class="fa fa-check"></i>
          <span>提交答案</span>
        </button>
        <button class="action-btn secondary">
          <i class="fa fa-star-o"></i>
        </button>
      </div>
    </div>
  </div>
  
  <!-- 留言区 -->
  <div class="comments-section">
    <div class="comments-title">
      <span>留言讨论</span>
      <span class="comments-count">(32)</span>
    </div>
    
    <!-- 留言输入框 -->
    <div class="comment-input-container">
      <img src="https://picsum.photos/100/100?random=99" alt="你的头像" class="user-avatar">
      <div class="comment-input-wrapper">
        <textarea class="comment-input" placeholder="分享你的想法..."></textarea>
        <button class="send-comment">发送</button>
      </div>
    </div>
    
    <!-- 留言列表 -->
    <div class="comments-list">
      <!-- 留言1 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=5" alt="用户头像" class="user-avatar">
        <div class="comment-content">
          <div class="comment-header">
            <span class="comment-author">旅行爱好者</span>
            <span class="comment-time">2小时前</span>
          </div>
          <div class="comment-text">第一张图肯定是埃菲尔铁塔，法国的标志性建筑，太明显了！</div>
          <div class="comment-actions">
            <span class="comment-action like-btn" data-id="1">
              <i class="fa fa-heart-o"></i> 24
            </span>
            <span class="comment-action reply-btn" data-id="1">
              <i class="fa fa-reply"></i> 回复
            </span>
          </div>
          
          <!-- 回复列表 -->
          <div class="replies-list">
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=6" alt="用户头像" class="user-avatar">
              <div class="reply-content">
                <div class="comment-header">
                  <span class="comment-author">环球旅行者</span>
                  <span class="comment-time">1小时前</span>
                </div>
                <div class="reply-text">
                  <span class="reply-author">环球旅行者</span> 回复 <span class="reply-to">旅行爱好者</span>：是的，去年我还去参观过呢！
                </div>
                <div class="comment-actions">
                  <span class="comment-action like-btn" data-id="11">
                    <i class="fa fa-heart-o"></i> 8
                  </span>
                  <span class="comment-action reply-btn" data-id="11">
                    <i class="fa fa-reply"></i> 回复
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 留言2 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=7" alt="用户头像" class="user-avatar">
        <div class="comment-content">
          <div class="comment-header">
            <span class="comment-author">建筑迷</span>
            <span class="comment-time">3小时前</span>
          </div>
          <div class="comment-text">第三张是伦敦的大本钟，现在好像改名叫伊丽莎白塔了，所以答案应该是A选项吧？</div>
          <div class="comment-actions">
            <span class="comment-action like-btn" data-id="2">
              <i class="fa fa-heart-o"></i> 15
            </span>
            <span class="comment-action reply-btn" data-id="2">
              <i class="fa fa-reply"></i> 回复
            </span>
          </div>
        </div>
      </div>
      
      <!-- 留言3 -->
      <div class="comment-item">
        <img src="https://picsum.photos/100/100?random=8" alt="用户头像" class="user-avatar">
        <div class="comment-content">
          <div class="comment-header">
            <span class="comment-author">文化达人</span>
            <span class="comment-time">5小时前</span>
          </div>
          <div class="comment-text">自由女神像是法国赠送给美国的，所以第二张是美国，我觉得正确答案应该是A</div>
          <div class="comment-actions">
            <span class="comment-action like-btn" data-id="3">
              <i class="fa fa-heart-o"></i> 32
            </span>
            <span class="comment-action reply-btn" data-id="3">
              <i class="fa fa-reply"></i> 回复
            </span>
          </div>
          
          <!-- 回复列表 -->
          <div class="replies-list">
            <div class="reply-item">
              <img src="https://picsum.photos/100/100?random=9" alt="用户头像" class="user-avatar">
              <div class="reply-content">
                <div class="comment-header">
                  <span class="comment-author">历史学者</span>
                  <span class="comment-time">4小时前</span>
                </div>
                <div class="reply-text">
                  <span class="reply-author">历史学者</span> 回复 <span class="reply-to">文化达人</span>：没错，自由女神像是1886年赠送给美国的，象征自由与民主。
                </div>
                <div class="comment-actions">
                  <span class="comment-action like-btn" data-id="31">
                    <i class="fa fa-heart-o"></i> 7
                  </span>
                  <span class="comment-action reply-btn" data-id="31">
                    <i class="fa fa-reply"></i> 回复
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 加载更多留言 -->
    <div class="load-more-comments">
      <button class="load-more-btn">查看更多留言</button>
    </div>
  </div>
  
  <!-- 底部固定操作栏 -->
  <div class="bottom-action-bar">
    <a href="#" class="bottom-action active">
      <i class="fa fa-home"></i>
      <span>首页</span>
    </a>
    <a href="#" class="bottom-action">
      <i class="fa fa-compass"></i>
      <span>发现</span>
    </a>
    <a href="#" class="bottom-action">
      <i class="fa fa-plus-circle"></i>
      <span>发布</span>
    </a>
    <a href="#" class="bottom-action">
      <i class="fa fa-bell-o"></i>
      <span>通知</span>
    </a>
    <a href="#" class="bottom-action">
      <i class="fa fa-user-o"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- 结果弹窗 -->
  <div class="modal-overlay" id="resultModal">
    <div class="modal-content">
      <i class="fa fa-check-circle modal-icon success" id="modalIcon"></i>
      <h3 class="modal-title" id="modalTitle">回答正确</h3>
      <p class="modal-message" id="modalMessage">恭喜你回答正确！已获得抽奖资格，祝你好运！</p>
      <button class="modal-btn" id="modalBtn">确定</button>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 选项选择功能
    let selectedOption = null;
    const correctAnswer = "A";
    
    document.querySelectorAll('.option-item').forEach(item => {
      item.addEventListener('click', function() {
        // 移除其他选项的选中状态
        document.querySelectorAll('.option-item').forEach(opt => {
          opt.classList.remove('selected');
        });
        
        // 添加当前选项的选中状态
        this.classList.add('selected');
        selectedOption = this.getAttribute('data-option');
      });
    });
    
    // 提交答案功能
    const submitBtn = document.getElementById('submitAnswer');
    const resultModal = document.getElementById('resultModal');
    const modalIcon = document.getElementById('modalIcon');
    const modalTitle = document.getElementById('modalTitle');
    const modalMessage = document.getElementById('modalMessage');
    const modalBtn = document.getElementById('modalBtn');
    const answer解析 = document.getElementById('answer解析');
    
    submitBtn.addEventListener('click', function() {
      if (!selectedOption) {
        alert('请选择一个答案');
        return;
      }
      
      // 显示答案解析
      answer解析.classList.add('show');
      
      // 显示正确和错误的选项
      document.querySelectorAll('.option-item').forEach(item => {
        const option = item.getAttribute('data-option');
        if (option === correctAnswer) {
          item.classList.add('correct');
        } else if (option === selectedOption) {
          item.classList.add('incorrect');
        }
        
        // 禁用所有选项
        item.style.pointerEvents = 'none';
      });
      
      // 更改提交按钮文本
      submitBtn.innerHTML = '<i class="fa fa-check"></i><span>已提交</span>';
      submitBtn.disabled = true;
      submitBtn.style.backgroundColor = '#ccc';
      
      // 显示结果弹窗
      if (selectedOption === correctAnswer) {
        modalIcon.className = 'fa fa-check-circle modal-icon success';
        modalTitle.textContent = '回答正确';
        modalMessage.textContent = '恭喜你回答正确！已获得抽奖资格，祝你好运！';
      } else {
        modalIcon.className = 'fa fa-times-circle modal-icon error';
        modalTitle.textContent = '回答错误';
        modalMessage.textContent = '很遗憾，回答错误。再试一次吧！';
      }
      
      resultModal.classList.add('show');
    });
    
    // 关闭弹窗
    modalBtn.addEventListener('click', function() {
      resultModal.classList.remove('show');
    });
    
    // 点赞功能
    document.querySelectorAll('.like-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const isLiked = this.classList.contains('liked');
        const countElem = this.childNodes[2];
        let count = parseInt(countElem.textContent.trim());
        
        if (isLiked) {
          // 取消点赞
          this.classList.remove('liked');
          this.querySelector('i').className = 'fa fa-heart-o';
          countElem.textContent = ` ${count - 1}`;
        } else {
          // 点赞
          this.classList.add('liked');
          this.querySelector('i').className = 'fa fa-heart';
          countElem.textContent = ` ${count + 1}`;
        }
      });
    });
    
    // 回复功能
    document.querySelectorAll('.reply-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const commentId = this.getAttribute('data-id');
        const author = this.closest('.comment-content, .reply-content').querySelector('.comment-author').textContent;
        
        // 聚焦到评论框并填充回复对象
        const commentInput = document.querySelector('.comment-input');
        commentInput.focus();
        commentInput.value = `回复 @${author}：`;
        
        // 滚动到评论框
        commentInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
      });
    });
    
    // 发送评论
    document.querySelector('.send-comment').addEventListener('click', function() {
      const commentInput = document.querySelector('.comment-input');
      const commentText = commentInput.value.trim();
      
      if (!commentText) return;
      
      // 创建新评论元素
      const commentsList = document.querySelector('.comments-list');
      const newComment = `
        <div class="comment-item">
          <img src="https://picsum.photos/100/100?random=99" alt="你的头像" class="user-avatar">
          <div class="comment-content">
            <div class="comment-header">
              <span class="comment-author">我</span>
              <span class="comment-time">刚刚</span>
            </div>
            <div class="comment-text">${commentText}</div>
            <div class="comment-actions">
              <span class="comment-action like-btn" data-id="${Date.now()}">
                <i class="fa fa-heart-o"></i> 0
              </span>
              <span class="comment-action reply-btn" data-id="${Date.now()}">
                <i class="fa fa-reply"></i> 回复
              </span>
            </div>
          </div>
        </div>
      `;
      
      // 添加到评论列表顶部
      commentsList.insertAdjacentHTML('afterbegin', newComment);
      
      // 清空输入框
      commentInput.value = '';
      
      // 更新评论计数
      const commentsCount = document.querySelector('.comments-count');
      const currentCount = parseInt(commentsCount.textContent.match(/\d+/)[0]);
      commentsCount.textContent = `(${currentCount + 1})`;
      
      // 为新添加的按钮绑定事件
      bindNewCommentEvents();
    });
    
    // 为新添加的评论绑定事件
    function bindNewCommentEvents() {
      const newComment = document.querySelector('.comment-item:first-child');
      
      // 点赞事件
      newComment.querySelector('.like-btn').addEventListener('click', function() {
        const isLiked = this.classList.contains('liked');
        const countElem = this.childNodes[2];
        let count = parseInt(countElem.textContent.trim() || 0);
        
        if (isLiked) {
          this.classList.remove('liked');
          this.querySelector('i').className = 'fa fa-heart-o';
          countElem.textContent = ` ${count - 1}`;
        } else {
          this.classList.add('liked');
          this.querySelector('i').className = 'fa fa-heart';
          countElem.textContent = ` ${count + 1}`;
        }
      });
      
      // 回复事件
      newComment.querySelector('.reply-btn').addEventListener('click', function() {
        const commentInput = document.querySelector('.comment-input');
        commentInput.focus();
        commentInput.value = '回复 @我：';
      });
    }
    
    // 关注按钮功能
    document.querySelector('.follow-btn').addEventListener('click', function() {
      const isFollowing = this.textContent === '已关注';
      
      if (isFollowing) {
        this.textContent = '关注';
        this.style.backgroundColor = '#007aff';
      } else {
        this.textContent = '已关注';
        this.style.backgroundColor = '#eee';
        this.style.color = '#666';
      }
    });
    
    // 收藏按钮功能
    document.querySelector('.action-btn.secondary').addEventListener('click', function() {
      const icon = this.querySelector('i');
      const isStarred = icon.classList.contains('fa-star');
      
      if (isStarred) {
        icon.className = 'fa fa-star-o';
      } else {
        icon.className = 'fa fa-star';
        icon.style.color = '#ffcc00';
      }
    });
    
    // 加载更多留言
    document.querySelector('.load-more-btn').addEventListener('click', function() {
      const btn = this;
      btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        const commentsList = document.querySelector('.comments-list');
        
        // 添加更多留言
        const moreComments = `
          <div class="comment-item">
            <img src="https://picsum.photos/100/100?random=10" alt="用户头像" class="user-avatar">
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">世界公民</span>
                <span class="comment-time">昨天</span>
              </div>
              <div class="comment-text">自由女神像是我最喜欢的建筑之一，太有象征意义了</div>
              <div class="comment-actions">
                <span class="comment-action like-btn" data-id="4">
                  <i class="fa fa-heart-o"></i> 9
                </span>
                <span class="comment-action reply-btn" data-id="4">
                  <i class="fa fa-reply"></i> 回复
                </span>
              </div>
            </div>
          </div>
          
          <div class="comment-item">
            <img src="https://picsum.photos/100/100?random=11" alt="用户头像" class="user-avatar">
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">摄影师</span>
                <span class="comment-time">昨天</span>
              </div>
              <div class="comment-text">这些照片拍得真不错，角度选得很好，能清晰看到建筑细节</div>
              <div class="comment-actions">
                <span class="comment-action like-btn" data-id="5">
                  <i class="fa fa-heart-o"></i> 12
                </span>
                <span class="comment-action reply-btn" data-id="5">
                  <i class="fa fa-reply"></i> 回复
                </span>
              </div>
            </div>
          </div>
        `;
        
        commentsList.insertAdjacentHTML('beforeend', moreComments);
        
        // 恢复按钮状态
        btn.innerHTML = '查看更多留言';
        
        // 为新添加的按钮绑定事件
        document.querySelectorAll('.comment-item:last-child .like-btn, .comment-item:nth-last-child(2) .like-btn').forEach(btn => {
          btn.addEventListener('click', function() {
            const isLiked = this.classList.contains('liked');
            const countElem = this.childNodes[2];
            let count = parseInt(countElem.textContent.trim());
            
            if (isLiked) {
              this.classList.remove('liked');
              this.querySelector('i').className = 'fa fa-heart-o';
              countElem.textContent = ` ${count - 1}`;
            } else {
              this.classList.add('liked');
              this.querySelector('i').className = 'fa fa-heart';
              countElem.textContent = ` ${count + 1}`;
            }
          });
        });
        
        document.querySelectorAll('.comment-item:last-child .reply-btn, .comment-item:nth-last-child(2) .reply-btn').forEach(btn => {
          btn.addEventListener('click', function() {
            const author = this.closest('.comment-content').querySelector('.comment-author').textContent;
            const commentInput = document.querySelector('.comment-input');
            commentInput.focus();
            commentInput.value = `回复 @${author}：`;
          });
        });
      }, 1500);
    });
    
    // 分享按钮功能
    document.querySelector('.top-nav .fa-share-alt').parentElement.addEventListener('click', function() {
      alert('分享到：微信好友、朋友圈、微博、QQ好友');
    });
  </script>
</body>
</html>
